﻿@using Microsoft.AspNetCore.Http;
@using SimpleIdServer.IdServer.Api;
@using SimpleIdServer.IdServer.Domains;
@using UseOpenIddictAsDatasource.Resources
@using System.Security.Claims;
@using SimpleIdServer.Vc.Models;
@model SimpleIdServer.IdServer.UI.ViewModels.CredentialsViewModel

@{
    ViewBag.Title = CredentialsResource.title;
    Layout = "~/Views/Shared/_Layout.cshtml";
    Func<CredentialTemplateDisplay, string> getCardBodyClass = (d) =>
    {
        if (string.IsNullOrWhiteSpace(d.BackgroundColor)) return string.Empty;
        return $"background-color:{d.BackgroundColor}";
    };
    var issuer = $"{HandlerContext.GetIssuer(Context.Request.GetAbsoluteUriWithVirtualPath())}/{SimpleIdServer.IdServer.CredentialIssuer.Constants.EndPoints.CredentialOffer}/shareqr";

}

<div class="row gy-4">
    @foreach(var credential in Model.Credentials)
    {
        <div class="col-md-3 credential">
            <div class="card shadow-sm">
                @if(credential.Display != null)
                {
                    @if(!string.IsNullOrWhiteSpace(credential.Display.LogoUrl))
                    {
                        <img class="card-img-top" src="@credential.Display.LogoUrl" />
                    }
                    <div class="card-body" style=@getCardBodyClass(credential.Display)>
                        <h5 class="card-title">@credential.Display.Name</h5>
                        @if(!string.IsNullOrWhiteSpace(credential.Display.Description))
                        {
                            <p class="card-text">@credential.Display.Description</p>
                        }

                        <button class="share btn btn-primary" data-credentialId="@credential.Id">@CredentialsResource.share</button>
                    </div>
                }
            </div>
        </div>  
    }
</div>

<div class="modal shareCredOffer">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@CredentialsResource.shareOneWallet</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                @if(!Model.ClientIds.Any())
                {
                    <div class="alert alert-danger">@CredentialsResource.noWallet</div>
                }
                else
                {
                    <form method="post" target="@issuer">
                        <label>@CredentialsResource.selectWallet</label>
                        <select class="form-select clientId">
                            @foreach(var clientId in Model.ClientIds)
                            {
                                <option value="@clientId">@clientId</option>
                            }
                        </select>
                        <button class="btn btn-primary mt-1" type="submit">@CredentialsResource.share</button>
                    </form>
                    <div class="img" style="display: none;" class="mt-1">
                        <h6>@CredentialsResource.scanQRCode</h6>
                        <img src="#" width="200px" />
                    </div>
                }
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            let selectedCredentialId = null;
            $(".shareCredOffer").modal({
                backdrop: 'static',
                keyboard: true
            });
            $(".credential .share").click(function() {
                selectedCredentialId = $(this).data("credentialid");  
                $(".shareCredOffer").modal('show');
            });
            $(".shareCredOffer form").submit(function(evt) {
                evt.preventDefault();
                $(".shareCredOffer .img").css("display", "none");
                const shareBtn = $(".shareCredOffer form button");
                shareBtn.prop("disabled", true);
                const clientId = $(".shareCredOffer .clientId").find(":selected").val();
                const target = this.target;
                $.ajax({
                    type: 'POST',
                    url: target,
                    xhrFields: {
                        responseType: 'blob'
                    },
                    data: JSON.stringify({ wallet_client_id : clientId, credential_template_id: selectedCredentialId }),
                    contentType: 'application/json',
                    success: function(e) {
                        const url = window.URL || window.webkitURL;
                        const src = url.createObjectURL(e);
                        $(".shareCredOffer .img").css("display", "block");
                        $(".shareCredOffer .img > img").attr("src", src);
                        shareBtn.prop("disabled", false);
                    }
                });
            });
        });
    </script>
}